import { Button, Col, DatePicker, Form, Input, Modal, Row, Select, Table } from "antd";
import React from "react";
import dc from "@/assets/homeImgV2/dc.png"
import moment from "moment";
import { formReportList, formReportListInfo } from "@/services/formInteraction";
import jsonDataUtils from "@/utils/jsonDataUtils";
import RightDrawer from "../flow/rightDrawer";

class Report extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      current:1,
      size:10,
      list:[],
      total:0,
      loading:false,
      visible:false,
      formData:[]
    }
  }

  componentDidMount(){
    this.getList()
  }

  getList = () => {
    this.setState({
      loading:true
    },async () => {
      const { current,size } = this.state;
      const info = this.props.form.getFieldsValue()
      const { location:{query:{id}} } = this.props
      console.log();
      let obj = {
        current,
        size,
        search:info.search,
        type:info.type,
        beginTime:info.time ? moment(info.time[0]).format("YYYY-MM-DD") : '',
        endTime:info.time ? moment(info.time[1]).format("YYYY-MM-DD") : '',
        formId:id
      }
      console.log(obj);
      const res = await formReportList(obj)
      this.setState({
        list:res.records,
        total:res.total,
        loading:false
      })
    })
  }

  doQuery = (current,size) => {
    this.setState({
      current,
      size
    },() => {
      this.getList()
    })
  }

  openDetail = id => {
    this.setState({
      visible:true
    },async () => {
      const res = await formReportListInfo({id})
      this.setState({
        formData:res
      })
    })
  }

  cancelModal = () => {
    this.setState({
      visible:false
    })
  }

  renderContent = content => {
    console.log(content);
    const flag = jsonDataUtils.isJsonString(content)
    console.log(flag);
    if(flag){
      try{
        const list = JSON.parse(content)
        console.log(list);
        return (
          <div>
            {
              list.map((item,i) => {
                return item.attaName ? (
                  <p style={{marginBottom:5}} key={i}><a href={item.attaUrl} target="_blank">{item.attaName}</a></p>
                ) : (
                  <span style={{marginBottom:5,marginRight:5}} key={i}>{item}</span>
                )
              })
            }
          </div>
        )
      }catch(e){}
    }else{
      return <div>{content}</div>
    }
  }

  refreshTemplate = () => {
    // this.getTemplates()
  }

  render(){
    const { current,size,list,total,loading,visible,formData } = this.state;
    const { form:{getFieldDecorator},location:{query:{id}} } = this.props;
    const columns = [
      {
        title:"序号",
        dataIndex:"index",
        width:100,
        render:(text,row,index) => {
          return (current - 1) * size +(index + 1)
        }
      },
      {
        title:"uuId",
        dataIndex:"uuId"
      },
      {
        title:"记录时间",
        dataIndex:"createTime",
        render:time => {
          return time ? moment(time).format("YYYY-MM-DD HH:mm:ss") : ''
        }
      },
      {
        title:"操作",
        render:(text,row,index) => {
          return <Button type="primary" onClick={() => this.openDetail(row.id)}>详情</Button>
        }
      }
    ]
    return(
      <div>
        <Form layout="inline" style={{marginBottom:24}}>
          <Row>
            <Col span={10}>
              <Form.Item>
                {
                  getFieldDecorator("type",{initialValue:1})(
                    <Select onChange={() => this.doQuery(1,size)}>
                      <Select.Option value={0}>按记录时间升序</Select.Option>
                      <Select.Option value={1}>按记录时间降序</Select.Option>
                    </Select>
                  )
                }
              </Form.Item>
              <Form.Item>
                <Button type="link" icon="setting" style={{marginRight:8}} onClick={() => this.RightDrawer.initModal({model:"report",title:"报表配置"},'report')}>报表设置</Button>
                <Button type="link"> <img src={dc} style={{marginRight:5}} /> Excel导出</Button>
              </Form.Item>
            </Col>
            <Col span={14} style={{textAlign:'right'}}>
              <Form.Item>
                {
                  getFieldDecorator("time",{initialValue:[moment().subtract(7,'days'),moment()]})(
                    <DatePicker.RangePicker allowClear={false} />
                  )
                }
              </Form.Item>
              <Form.Item>
                {
                  getFieldDecorator("search")(
                    <Input.Search placeholder="请输入要搜索的报表记录（模糊搜索）" onSearch={() => this.doQuery(1,size)} />
                  )
                }
              </Form.Item>
              <Form.Item>
                <Button type="primary" onClick={() => this.doQuery(1,size)}>查询</Button>
              </Form.Item>
            </Col>
          </Row>
        </Form>

        <Table 
          columns={columns}
          dataSource={list}
          loading={loading}
          rowKey={'id'}
          pagination={{
            total,
            current,
            pageSize:size,
            showQuickJumper:true,
            showSizeChanger:true,
            onChange:this.doQuery,
            onShowSizeChange:this.doQuery
          }}
        />

        <Modal
          title="详情"
          visible={visible}
          onCancel={this.cancelModal}
          footer={null}
          bodyStyle={{minHeight:300}}
        >
          {
            formData.map((item,index) => {
              return (
                <Row style={{marginBottom:10}}>
                  <Col span={4}>{item.name}：</Col>
                  <Col span={20}>{this.renderContent(item.content)}</Col>
                </Row>
              )
            })
          }
        </Modal>

        <RightDrawer onRef={ref => this.RightDrawer = ref} formId={id} refreshTemplate={this.refreshTemplate} />
      </div>
    )
  }
}

export default Form.create()(Report)